<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.flex {
			display: flex;
		}

		.flex-row {
			display: flex;
			align-items: center;
		}

		body {
			padding: 0;
			margin: 0;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		div {
			box-sizing: border-box;
		}

		.dialog {
			width: 811px;
			background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);
			border-radius: 4px;
			padding: 30px 40px 57px;
		}



		.mySetting #areaDialog .tab_switch {
			margin-top: 20px;
		}

		.mySetting #areaDialog .tab_switch p {
			width: 80px;
			font-size: 16px;
			color: #333333;
			margin-right: 60px;
			font-weight: 600;
			user-select: none;
		}

		.mySetting #areaDialog .tab_switch .active {
			position: relative;
		}

		.mySetting #areaDialog .tab_switch .active::after {
			content: '';
			width: 62px;
			height: 4px;
			background: #00557f;
			border-radius: 90px;
			position: absolute;
			left: 50%;
			margin-left: -31px;
			bottom: -6px;
		}

		.mySetting #areaDialog .list_content {
			width: 100%;
			height: 398px;
			background: #fff;
			margin: 20px 0;
			overflow: hidden;
			overflow-y: scroll;
			scrollbar-width: none;
			padding: 30px 30px 48px;
			border-radius: 20px;

		}

		.mySetting #areaDialog .list_content::-webkit-scrollbar {
			width: 5px;
			height: 5px;
		}

		.mySetting #areaDialog .list_content::-webkit-scrollbar-track {
			background: #ecdeff;
			border-radius: 2px;
		}

		.mySetting #areaDialog .list_content::-webkit-scrollbar-thumb {
			background: #d2eaff;
			border-radius: 10px;
		}

		.mySetting #areaDialog .list_content .list {
			flex-wrap: wrap;
		}

		.mySetting #areaDialog .list_content .list p {
			width: 129px;
			padding: 0 5px;
			height: 57px;
			border: 1px solid #D4D4D4;
			font-size: 15px;
			color: #707070;
			margin-right: 30px;
			text-align: center;
			user-select: none;
			margin-bottom: 30px;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.mySetting #areaDialog .list_content .list p:nth-child(4n+4) {
			margin-right: 0;
		}

		.mySetting #areaDialog .list_content .list .pro_active {
			position: relative;
			border: 1px solid #45D4FB;
		}

		.mySetting #areaDialog .list_content .list .pro_active::after {
			position: absolute;
			content: '';
			width: 40px;
			height: 42px;
			background: url(img/角标选中.png);
			background-size: 100% 100%;
			top: 21px;
			right: -5px;
		}
	</style>
	<body>
		<section class="mySetting">
			<div class="dialog" id="areaDialog">
				<div class="flex-row j_b a_title">
					<p>更换所在地区</p>
				</div>
				<div class="flex-row tab_switch">
					<p class="active">请选择省份</p>
					<p>请选择城市</p>
				</div>
				<div class="list_content">
					<div class="list flex" id="provinceList"></div>
					<div class="list flex" id="cityList"></div>
				</div>
			</div>
		</section>
	</body>
	<script src="js/area.js" type="text/javascript"></script>
	<script src="../商品详情/js/jq.js"></script>
	<script>
		var province = '',
			city = '',
			cityItem = '';
		// 省列表
		function renderP() {
			var content = "";
			provinceList.forEach((item, index) => {
				content += '<p  data-name=' + item.name + ' data-index=' + index + '>' + item.name +
					'</p> '
			})
			document.getElementById("provinceList").innerHTML = content;
			// 选择省
			var items = document.getElementById("provinceList").getElementsByTagName("p");
			var length = items.length;
			for (var i = 0; i < length; i++) {
				items[i].onclick = function() {
					for (var j = 0; j < length; j++) {
						items[j].classList.remove('pro_active');
					};
					this.classList.add('pro_active');
					province = this.dataset.name;
					cityItem = this.dataset.index;
				}
			};
		}
		renderP();

		// 城市列表
		function renderCity() {
			var content = "";
			provinceList[cityItem].cityList.forEach((item, index) => {
				content += '<p data-name=' + item.name + ' data-index=' + index + '>' + item.name + '</p> '
			})
			document.getElementById("cityList").innerHTML = content;

			// 选择城市

			var items = document.getElementById("cityList").getElementsByTagName("p");
			var length = items.length;
			for (var i = 0; i < length; i++) {
				items[i].onclick = function() {
					for (var j = 0; j < length; j++) {
						items[j].classList.remove('pro_active');
					};
					this.classList.add('pro_active');
					city = this.dataset.name;
				}
			};
		}


		var items = document.getElementsByClassName('tab_switch')[0].getElementsByTagName('p');
		// 切换地区选择
		for (var i in items) {
			items[i].index = i;
			items[i].onclick = function() {
				
				if (this.index == 0) {
					document.getElementById('provinceList').style.display = 'flex';
					document.getElementById('cityList').style.display = 'none';
				} else {
					if (province == '' || province == undefined || province == null) {
						return false;
					}
					document.getElementById('provinceList').style.display = 'none';
					document.getElementById('cityList').style.display = 'flex';
					renderCity();
					
				}
				for (var j = 0; j < items.length; j++) {
					items[j].classList.remove('active');
				};
				this.classList.add('active');

			}
		}
		// jq写法
		// function renderP() {
		// 	$.each(provinceList, function(n, item) {
		// 		content = '<p data-name=' + item.name + ' data-index=' + n + '>' + item.name + '</p> '
		// 		$("#provinceList").append(content);
		// 	})

		// 	// 选择省
		// 	$('#provinceList p').click(function() {
		// 		$(this).addClass("pro_active").siblings().removeClass("pro_active");
		// 		province = $(this).attr('data-name')
		// 		cityItem = $(this).attr('data-index')

		// 	});
		// }
		// renderP();

		// // 城市列表
		// function renderCity() {

		// 	$.each(provinceList[cityItem].cityList, function(n, item) {
		// 		content = '<p data-name=' + item.name + '>' + item.name + '</p> '
		// 		$("#cityList").append(content);
		// 	})

		// 	// 选择城市
		// 	$('#cityList p').click(function() {
		// 		$(this).addClass("pro_active").siblings().removeClass("pro_active");
		// 		city = $(this).attr('data-name');

		// 	});
		// }



		// // 切换地区选择
		// $('#areaDialog .tab_switch p').click(function() {
		// 	if ($(this).index() == 0) {
		// 		// renderP();
		// 		$("#provinceList").fadeIn(300)
		// 		$("#cityList").fadeOut(100)
		// 	} else {
		// 		if (province == '' || province == undefined || province == null) {
		// 			return false;
		// 		}
		// 		// 清空数据重新渲染
		// 		$("#cityList").empty()
		// 		renderCity();
		// 		$("#provinceList").fadeOut(100)
		// 		$("#cityList").fadeIn(300)
		// 	}
		// 	$(this).addClass("active").siblings().removeClass("active");
		// });
	</script>
</html>
